<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true" v-permission="'book:category:create'">新增分类</el-button>
    <el-tree
        style="max-width: 600px"
        :data="bookCategoryList"
        show-checkbox
        :props="props"
        node-key="categoryId"
        :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <span>{{ data.name }}</span>
          <div>
            <el-button type="primary" link @click="append(node,data)">
              新增
            </el-button>
            <el-button
                style="margin-left: 4px"
                type="danger"
                link
                @click="edit(node, data)"
            >
              编辑
            </el-button>
            <el-button
                style="margin-left: 4px"
                type="danger"
                link
                @click="remove(node, data)"
            >
              删除
            </el-button>
          </div>
        </div>
      </template>
    </el-tree>
    <el-dialog
        v-model="dialogVisible"
        :title="isAdd ? '新增分类':'修改分类'"
        width="500"
        draggable
        @close="resetCategoryForm"
    >
      <el-form :model="bookCategorySaveForm" label-width="80px" ref="saveCategoryFormRef" :rules="rules">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="bookCategorySaveForm.name"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" prop="parentId">
          <el-tree-select
              v-model="bookCategorySaveForm.parentId"
              :data="parentCategoryList"
              check-strictly
              :props="props"
              node-key="categoryId"
              :render-after-expand="false"
              style="width: 240px"
          />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="bookCategorySaveForm.description"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitSave(saveCategoryFormRef)">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import {reqGetBookCategoryTreeList, reqCreateBookCategory, reqUpdateBookCategory} from "@/api/book/bookCategory.js";

let bookCategoryList = ref([])
let isAdd = ref(true)
let dialogVisible = ref(false)
let parentCategoryList = ref([])
let saveCategoryFormRef = ref()
let bookCategorySaveForm = reactive({
  categoryId: null,
  name: "",
  parentId: 0,
  level:1,
  description: '',
})
let props = reactive({
  label: 'name',
  children: 'children'
})

let getBookCategoryList = async () => {
  let res = await reqGetBookCategoryTreeList()
  bookCategoryList.value = res.data
  parentCategoryList.value = [{
    categoryId: 0,
    name: '顶级分类',
    children: res.data
  }]
}
let append = (node,data) => {
  bookCategorySaveForm.parentId = data.categoryId
  bookCategorySaveForm.level = node.level + 1
  dialogVisible.value = true
}
let edit = (node, data) => {
  Object.assign(bookCategorySaveForm, data)
  isAdd.value = false
  dialogVisible.value = true
}
let submitSave = async (r) => {
  r.validate(async (valid) => {
    if (valid) {
      if (isAdd.value) {
        await reqCreateBookCategory(bookCategorySaveForm)
      } else await reqUpdateBookCategory(bookCategorySaveForm)
      await getBookCategoryList()
      dialogVisible.value = false
    }
  })
}
let remove = (node, data) => {
  console.log(node, data)
}
let resetCategoryForm = () => {
  bookCategorySaveForm.name = ''
  bookCategorySaveForm.parentId = 0
  bookCategorySaveForm.description = ''
}
let rules = {
  name: [
    {required: true, message: '请输入分类名称', trigger: 'blur'},
    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'},
  ],
  parentId: [
    {required: true, message: '请选择上级分类', trigger: 'blur'},
  ],
}
onMounted(() => {
  getBookCategoryList()
})
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
